<!-- 运单详情-待审核 -->
<template>
  <view class="info_body">
    <view class="card flex_start">
      <image class="img" src="@/assets/images/pages2/willPage/sh.png" />
      <view class="flex_up">
        <span class="tit1">待审核</span>
        <span class="tit2">请您尽快审核订单</span>
      </view>
    </view>

    <!-- 地址簿 -->
    <view class="card">
      <view class="address_card">
        <view class="flex_start">
          <image class="icon" src="@/assets/images/pages2/willPage/fa.png" />
          <view>
            <view class="person flex_start">
              <span>{{ orderList?.shipper  || '暂无数据'}}{{ orderList?.shipperMobile ? orderList?.shipperMobile :
                orderList?.shipperTel }}</span>
            </view>
            <view class="add_info">{{ orderList?.shipperAdd || '暂无数据' }}</view>
          </view>
        </view>
        <view class="flex_start">
          <image class="icon" src="@/assets/images/pages2/willPage/shou.png" />
          <view>
            <view class="person flex_start">
              <span>{{ orderList?.receiver  || '暂无数据'}}{{ orderList?.receiverMobile ? orderList?.receiverMobile :
                orderList?.receiverTel }}</span>
            </view>
            <view class="add_info">{{ orderList?.receiverAdd || '暂无数据' }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="card">
      <view class="tit">基本信息</view>
      <view class="base_card">
        <view class="con flex_start"><span>承运单号</span><span>{{ orderList?.billNo || '暂无数据' }}</span> 
          <!-- <span @click="toCode" class="blue_font" style="margin-left: 15rpx;">电子承运单></span> -->
        </view>
        <view class="con flex_start"><span>下单时间</span><span>{{ orderList?.billingTime || '暂无数据' }}</span></view>
        <view class="con flex_start"><span>起运地</span><span>{{ orderList?.startBranchName || '暂无数据' }}</span></view>
        <view class="con flex_start"><span>目的地</span><span>{{ orderList?.destinationBranchName || '暂无数据' }}</span></view>
        <view class="con flex_start"><span>外转目的地</span><span>{{ orderList?.outSourcingDestination || '暂无数据' }}</span></view>
        <view class="flex">
          <view class="con flex_start"><span>承运类型</span><span>{{ pickSendType(orderList?.sendType) }}</span></view>
          <view class="con flex_start"><span>付款方式</span><span>{{ pickClearingForm(orderList?.clearingForm) }}</span></view>
        </view>
        <view class="flex">
          <view class="con flex_start"><span>接货方式</span><span>{{ pickUpType(orderList?.pickUpMode) }}</span></view>
          <view class="con flex_start"><span>保价声明</span><span>￥{{ orderList?.insuredMoney  || '暂无数据'}}</span></view>
        </view>
        <view class="door_box gray_bg flex_start">
          <image class="img" src="@/assets/images/32pt@3x.png" />
          <view>
            <span class="t">上门接货时间</span>
            <span class="te">{{ orderList?.receivingTime || '暂无数据'}}</span>
          </view>
        </view>
      </view>
    </view>

    <view class="card">
      <view class="tit">货物信息</view>
      <view class="gray_bg">
        <view class="goods_card flex_between" v-for="(item, index) in orderList?.goodsInfo" :key="index">
          <view class="flex_start">
            <span>{{ item.goodsName  || '暂无数据'}}</span>
            <span :style="{ color: item.upNumber && item.upNumber !== item.goodsNumber ? '#0966FF' : '#666' }">{{
              filterGoodsNum(item) }}</span>
          </view>
          <view>{{ filterGoodsInfo(item) }}</view>
        </view>
      </view>
    </view>

    <view class="card">
      <view class="tit">提货信息</view>
      <view class="base_card">
        <view class="flex">
          <view class="con flex_start"><span>提货方式</span><span>{{ pickUpType(orderList?.pickUpMode) }}</span></view>
          <view class="con flex_start"><span>直送服务</span><span>{{ pickDeliveryType(orderList?.deliveryType) }}</span></view>
        </view>
        <view class="flex">
          <view class="con flex_start"><span>卸货类型</span><span>{{ pickDischargeServer(orderList?.dischargeServer) }}</span>
          </view>
          <view class="con flex_start"><span>楼层电梯</span><span>{{ floorType }}</span></view>
        </view>
      </view>
    </view>

    <view class="card" v-if="orderList?.collectionMoney">
      <view class="tit">代收货款</view>
      <view class="base_card">
        <view class="flex">
          <view class="con flex_start"><span>货款金额</span><span>￥{{ orderList?.collectionMoney || '暂无数据' }}</span></view>
          <view class="con flex_start">
            <span>返还周期</span>
            <span v-if="orderList.returnCycle == 1">即日退</span>
            <span v-if="orderList.returnCycle == 2">三日退</span>
            <span v-if="orderList.returnCycle == 3">月结</span>
            <span v-if="!orderList.returnCycle">暂无数据</span>
          </view>
        </view>
        <view class="con flex_start">
          <span>返还方式</span>
          <span v-if="orderList.returnType == 1">会员卡返还</span>
          <span v-if="orderList.returnType == 2">银行卡返还</span>
          <span v-if="orderList.returnType == 3">微信返还</span>
          <span v-if="orderList.returnType == 4">支付宝返还</span>
          <span v-if="orderList.returnType == 5">现金返还</span>
          <span v-if="!orderList.returnType">暂无数据</span>
        </view>
        <view class="con flex_start"><span>银行卡号</span><span>{{ orderList?.returunAccount || '暂无数据' }}</span></view>
      </view>
    </view>

    <view class="card">
      <view class="tit">更多服务</view>
      <view class="base_card">
        <view class="con flex_start"><span>单据服务</span><span>{{ orderList?.billServer || '暂无数据' }}</span></view>
        <view class="con flex_start"><span>包装服务</span><span>{{ orderList?.packing ? '是' : '否' }}</span></view>
      </view>
    </view>

    <view class="card">
      <view class="tit">签单信息</view>
      <view class="base_card">
        <view class="con flex_start"><span>签单单位</span><span>{{ orderList?.billCompany || '暂无数据' }}</span></view>
        <view class="con flex_start"><span>结算地</span><span>{{ orderList?.clearAdd || '暂无数据' }}</span></view>
      </view>
    </view>
    <view class="btn_box">
      <view class="btn" @click="toReviewPage()">审核运单</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import Taro, { useReady, useRouter } from '@tarojs/taro'
import { ref, onMounted} from 'vue'
import useOrderStore from '@/store/order'


const orderStore = useOrderStore()
const orderList = ref();
orderList.value = orderStore.orderInfo

const floorType = ref('') // 楼层电梯

onMounted(() => {
  pickElevatorNum(orderList.value.dischargeElevator); // 初始化楼层
});


/* 初始化数据变量 start */
useReady(() => {
  Taro.setNavigationBarTitle({
    title: '运单详情'
  })
  Taro.setNavigationBarColor({
    frontColor: '#000000',
    backgroundColor: '#ffffff',
  });
})



/* 过滤承运类型 */
function pickSendType(val: string) {
  if (val == '1') {
    return '快件'
  } else if (val == '2') {
    return '普件'
  } else if (val == '3') {
    return '整车'
  } else if (val == '4') {
    return '560经济型'
  } else if (val == '5') {
    return '560商务型'
  } else if (val == '6') {
    return '次日达'
  } else if (val == '7') {
    return '隔日达'
  }
}

/* 过滤付款方式 */
function pickClearingForm(val: string) {
  if (val == '1') {
    return '签单'
  } else if (val == '2') {
    return '现付'
  } else if (val == '3') {
    return '提付'
  }
}

/* 过滤货物信息-名称件数 */
function filterGoodsNum(val) {
  const { upNumber, goodsNumber } = val;
  console.log(upNumber, goodsNumber)
  let goodsNum;
  if (goodsNumber) {
    if (upNumber !== goodsNumber) {
      goodsNum = upNumber !== 0 ? '(' + upNumber + '/' + goodsNumber + ')' : goodsNumber
    } else {
      goodsNum = goodsNumber
    }
  }
  return (
    `${goodsNum}件`
  );
}


/* 过滤货物信息-重量体积包装 */
function filterGoodsInfo(val) {
  return (
    val.weigh +
    "kg," +
    val.goodsVolume +
    "m³," +
    val.packing
  );
}

/* 过滤提货方式 */
function pickUpType(val: string) {
  if (val == '1') {
    return '自提'
  } else if (val == '2') {
    return '送货'
  } else {
    return '直送'
  }
}

/* 过滤直送服务 */
function pickDeliveryType(val: string) {
  if (val == '1') {
    return '送商超'
  } else if (val == '2') {
    return '进仓'
  } else {
    return '报关'
  }
}

/* 过滤卸货类型 */
function pickDischargeServer(val: string) {
  if (val == '1') {
    return '标准件'
  } else if (val == '2') {
    return '非标准'
  } else {
    return '特殊件'
  }
}

/* 楼层电梯初始化 */
function pickElevatorNum(val: string) {
  if (val) {
    floorType.value = "电梯"
  } else {
    floorType.value = `楼梯：${orderList.value.elevatorNum ? orderList.value.elevatorNum : '1'}楼`
  }
}

/* 跳转电子承运单 */
function toCode() {
  console.log('跳转电子承运单')
}

/* 审核运单按钮跳转到审核运单页面 */
function toReviewPage() {
  Taro.navigateTo({
    url: '/pages2/reviewPage/index'
  })
}

</script>

<style lang="scss">
.info_body {
  width: 750rpx;
  margin: 0 auto;
  background: #f5f5f5;
  padding: 16rpx 0;
  padding-bottom: 150rpx;

  .img {
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
  }

  .tit1 {
    font-size: 32rpx;
    color: #FF8F1F;
    font-weight: bold;
    margin-bottom: 4rpx;
  }

  .tit2 {
    font-size: 24rpx;
    color: #999;
  }


  .card {
    width: 702rpx;
    margin: 0 auto;
    padding: 24rpx;
    box-sizing: border-box;
    background: #fff;
    margin: 16rpx auto;
    font-size: 24rpx;
    border-radius: 16rpx;

    .tit {
      font-size: 32rpx;
      color: #252525;
      font-weight: bold;
      margin-bottom: 24rpx;
      padding-bottom: 12rpx;
      border-bottom: 1rpx solid #f0f0f0;
    }

    .gray_bg {
      width: 654rpx;
      box-sizing: border-box;
      background: #f5f5f5;
      padding: 12rpx;
      border-radius: 16rpx;
    }

  }

  .address_card {
    font-size: 32rpx;

    .icon {
      width: 72rpx;
      height: 72rpx;
    }

    .person {
      font-weight: 700;
      color: #252525;

      span:first-child {
        margin-right: 24rpx;
      }
    }

    .add_info {
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;
    }
  }

  .base_card {
    .con {
      margin-bottom: 12rpx;

      span:first-child {
        margin-right: 24rpx;
        color: #999;
      }
    }
  }

  .door_box {
    .img {
      width: 80rpx;
      height: 80rpx;
    }

    .t {
      font-size: 24rpx;
      color: #999;
    }

    .te {
      font-size: 24rpx;
    }
  }

  .goods_card {
    padding: 12rpx;
    border-bottom: 1rpx solid #e7e7e7;
  }

  .goods_card:last-child {
    border-bottom: none;
  }

}

.flex {
  display: flex;

  .con {
    flex: 1;
  }
}

.flex_start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex_between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex_center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex_up {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.blue_font {
  color: #0966FF;
}

.gray_font {
  color: #666;
}

.btn_box {
  width: 750rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  padding: 24rpx;
  box-sizing: border-box;

  .btn {
    width: 702rpx;
    height: 88rpx;
    background: #0966FF;
    font-size: 32rpx;
    text-align: center;
    line-height: 88rpx;
    color: #fff;
    margin: 0 auto;
    border-radius: 44rpx;
  }
}
</style>